<template>
	<view>
		<u-skeleton v-if="!picurl.length" rows="3"></u-skeleton>
		<view class="wrapper" v-if="picurl.length">
			<swiper :current="current" circular :autoplay="false" @change="change" @click="changeshow">
				<swiper-item v-for="(item,index) in picurl" :key="item._id">
					<image :src="item.url" v-if="readimg.includes(index)">
					</image>
				</swiper-item>
			</swiper>
			<view class="goback" @click="goback">
				<u-icon name="arrow-left" color="#eee" size="25"></u-icon>
			</view>
			<view class="date" v-if="show">
				<view class="selection">{{current+1}}/{{picurl.length}}</view>
				<uni-dateformat class="time" :date="Date.now()" format="hh:mm"></uni-dateformat>
				<uni-dateformat :date="Date.now()" format="MM月dd日"></uni-dateformat>
			</view>
			<view class="action" v-if="show">
				<view class="info" @click="show1 = true">
					<u-icon name="info-circle" size="25"></u-icon>
					<text>信息</text>
				</view>
				<view class="score" @click="scoreshow">
					<u-icon name="star" size="25"></u-icon>
					<text>{{picurl[current].score}}分</text>
				</view>
				<view class="down">
					<u-icon name="arrow-downward" size="25"></u-icon>
					<text>下载</text>
				</view>
			</view>
		</view>
		<u-popup :show="show1" round="10" @close="close" :closeable="true" closeOnClickOverlay>
			<view class="popinfo">
				<view>壁纸id: <text>{{picurl[current]._id}}</text> </view>
				<view>发布者: <text>{{picurl[current].nickname}}</text> </view>
				<view class="scoreinfo">
					<view>评分: </view>
					<u-rate count="5" v-model="score" size="25" allowHalf :disabled="false"></u-rate>
					<view>{{picurl[current].score}}分</view>
				</view>
				<view>摘要: <text>{{picurl[current].description}}</text> </view>
				<view>标签:<u-tag :text="item" v-for="item in picurl[current].tabs" plain shape="circle"
						style="margin-right: 10px;"></u-tag></view>
				<view class=" last">
					<text>声明:本图片来自网络，非商业使用，用于免费学习交流，如侵犯了您的权益，可直接发邮件到513894357@qq.com,管理将删除侵权壁纸!</text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="show2" @close="closemodel" round="20" mode="center" :closeable="true" closeOnClickOverlay>
			<view class="content">
				<view>评分</view>
				<u-rate count="5" v-model="score" size="25" allowHalf :disabled="isscore"></u-rate>
				<view>{{picurl[current].score}}分</view>
			</view>
			<u-button shape="circle" @click="confirm" :disabled="isscore" :type="type">确认</u-button>
		</u-popup>
	</view>
</template>

<script setup>
	import { getDetail } from '../../utils/api.js'
	let show = ref(false)
	let show1 = ref(false)
	let show2 = ref(false)
	let score = ref(0)
	let isscore = ref(false)
	let type = ref('primary')
	let picurl = ref([])
	let current = ref()
	let readimg = []
	onLoad((e) => {
		//将内容缓存起来，将_small.webp替换成.jpg
		let arr = uni.getStorageSync('picinfo')
		current.value = arr.findIndex(item => item._id == e.id)
		picurl.value = arr.map(item => {
			return {
				...item,
				url: item.smallPicurl.replace('_small.webp', '.jpg')
			}
		})
		// console.log(picurl.value);
		readimgline()
	})
	//swiper 轮播change事件
	const change = (index) => {
		current.value = index.detail.current
		//性能提升
		readimgline()
		readimg = [...new Set(readimg)]
		// console.log(readimg);
	}
	//性能提升 首次加载不加载全部图片 只加载当前图片的左右两边
	const readimgline = () => {
		readimg.push(
			current.value <= 0 ? picurl.value.length - 1 : current.value - 1,
			current.value,
			current.value >= picurl.value.length - 1 ? 0 : current.value + 1
		)
	}
	//切换显示隐藏
	const changeshow = () => {
		show.value = !show.value
	}
	//后退一步
	const goback = () => {
		uni.navigateBack()
	}
	//关闭info
	const close = () => {
		show1.value = false
	}
	//显示评分框
	const scoreshow = () => {
		show2.value = true
	}
	//关闭model
	const closemodel = () => {
		show2.value = false
	}
	//确认评分
	const confirm = () => {
		isscore.value = true
	}
</script>

<style scoped lang='scss'>
	.wrapper {
		width: 100%;
		height: 100vh;
		position: relative;

		swiper {
			width: 100%;
			height: 100%;

			swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.goback {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.2);
			position: absolute;
			top: 20px;
			left: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.date {
			width: 400rpx;
			height: 200rpx;
			/* border: 1px solid #ccc; */
			position: fixed;
			top: 200rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.selection {
				width: fit-content;
				background-color: rgba(0, 0, 0, 0.2);
				padding: 0 10px;
				border-radius: 10px;
			}

			.time {
				font-size: 100rpx;
			}
		}

		.action {
			width: 500rpx;
			height: 120rpx;
			background-color: #ccc;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			position: fixed;
			bottom: 80px;
			left: 0;
			right: 0;
			margin: 0 auto;
			border-radius: 50px;
		}
	}


	.popinfo {
		width: 100%;
		height: 100%;
		padding: 20px;
		display: flex;
		flex-direction: column;
		color: #aaa;

		view {
			line-height: 60rpx;
		}

		text {
			color: #000;
			font-size: 12px;
		}

		.scoreinfo {
			display: flex;
			flex-direction: row;
		}

		.last {
			background-color: #eee;
		}

	}



	.content {
		width: 600rpx;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>